<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        main{
            width: 250px;
            height: 80px;
            background-color: black;
            color: white;
            margin: 100px auto;
            text-align: center;
        }
        input{
            margin-top: 20px;
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <input type="text" value="">时
        <input type="text" value="">分
        <input type="text" value="">秒
   </main>
</body>
</html>
<script>
   function show(){
    var data=new Date();
    console.log(data);
    var hour=data.getHours();
    hour=hour<10?"0"+hour:hour;
    var min=data.getMinutes();
    min = min<10?"0"+min:min;
    var sec=data.getSeconds();
    sec = sec<10 ? "0"+sec:sec;
    document.querySelectorAll("input")[0].value=hour;
    document.querySelectorAll("input")[1].value=min;
    document.querySelectorAll("input")[2].value=sec;
    } 
    setInterval(show,1000);
</script>